<template>
	<view class="sub-kefu-content">
		<view class="order-top">
			<view class="kefu-title">
				我的红包
			</view>
			<image src="../../../static/common/sub-order-back.png" class="sub-back-icon" @tap="backpage"></image>
		</view>
		<scroll-view scroll-y="true" class="hongbao-box" @scrolltolower="loadMore" v-if="list.length>0">
			<view class="hongbao-item" v-for="(item,index) in list" :key="index">
				<view class="left">
					<view class="hongbao-money">{{getMoney(item.taskType)}}元现金</view>
					<view class="hongbao-result">[邀请{{getPerson(item.taskType)}}人参与]</view>
				</view>
				<view class="right">
					<view class="hongbao-time">{{getTime(item.createTime.time)}}</view>
					<view class="hongbao-stat" :class="{'finished':item.status!==0}">待完成</view>
				</view>
			</view>
			
		</scroll-view>
		<view class="nodata" v-else>
			<image src="../../../static/common/nodata-sub.png" class="noda-img"></image>
		</view>
	</view>
</template>

<script>
	const util = require('../../../util/util.js');
	export default{
		name:"subKeFu",
		data(){
			return{
				apptoken:"",
				pageIndex:1,
				nodata:false,
				list:[]
			}
		},
		onLoad() {
			this.apptoken = uni.getStorageSync("apptoken");
			this.getList();
		},
		methods:{
			getMoney(type){
				if(type == 1){
					return 5;
				}
				if(type == 2){
					return 12.8;
				}
				if(type == 3){
					return 20.8;
				}
				if(type == 4){
					return 28.8;
				}
				
			},
			getPerson(type){
				if(type == 1){
					return 2;
				}
				if(type == 2){
					return 5;
				}
				if(type == 3){
					return 8;
				}
				if(type == 4){
					return 10;
				}
			},
			getTime(time){
				return this.$CommonJS.getTime(time);
			},
			getList(type){
				const _this = this;
				uni.request({
					url:this.$API.URL + this.$API.inviteTaskList,
					data:{ apptoken:this.apptoken,pageIndex:this.pageIndex },
					success(res) {
						console.log(res);
						if(res.data.success){
							const d = res.data.data;
							if(d.length<0 && _this.pageIndex !=1){
								_this.$CommonJS.showToast("没有更多数据了");
								_this.nodata = true;
							}else{
								if(type){
									//分页
									d.forEach(item=>{
										_this.list.push(item);
									})
								}else{
									_this.list = d;
								}
								_this.pageIndex++;
							}
							
						}else{
							_this.$CommonJS.showToast(res.data.msg)
						}
					}
				})
			},
			//防抖事件//商品分页
			loadMore: util.throttle(function(e) {
				if(!this.nodata){
					this.getList('loadMore')
				}
				
			}, 300),
			backpage(){
				this.$CommonJS.navigateBack();
			}
		}
	}
</script>

<style scoped>
	.sub-kefu-content{
		width: 100%;
		height: 100%;
		background:linear-gradient(180deg,rgba(255,234,240,1) 0%,rgba(255,234,211,1) 100%);
		display: flex;
		flex-direction: column;
		justify-content: flex-start;
		align-items: center;
		letter-spacing: 0.5px;
	}
	.order-top{
		width: 100%;
		height: 60upx;
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
		position: relative;
		margin-top:72upx ;
		/* #ifdef H5 */
		margin-top: 36upx;
		/* #endif */
		
	}
	.sub-back-icon{
		width:58upx ;
		height: 58upx;
		position: absolute;
		top: 0;
		left:33upx ;
	}
	.kefu-title{
		font-size:20px;
		font-family:Alibaba PuHuiTi;
		font-weight:500;
		color:rgba(244,99,122,1);
		opacity:1;
	}
	.hongbao-box{
		width: calc(100% - 102upx);
		height: calc(100% - 199upx);
		display: flex;
		flex-direction: column;
		justify-content: flex-start;
		align-items: center;
		padding: 67upx 51upx 0 51upx;
	}
	.hongbao-item{
		width: 100%;
		height: 92upx;
		border-bottom: 1px solid rgba(114,124,142,0.1);
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
	}
	.left,.right{
		width: auto;
		height: 100%;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: flex-start;
	}
	.right{
			align-items: flex-end;
	}
	.hongbao-money{
		font-size: 13px;
		color: #111739;
		margin-bottom: 10upx;
	}
	.hongbao-result,.hongbao-time{
		font-size: 12px;
		color: #515C6F;
	}
	.hongbao-stat{
		font-size: 13px;
		color: #F4637A;
		
	}
	.finished{
		color: #111739;
	}
	.nodata{
		width: 100%;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		height: 800upx;
		
	}
	.noda-img{
		width: 181upx;
		height: 181upx;
	}
</style>
